<template>
    <div class="app-container">
        <FilterForm :data="filterData" @search="getList" />
        <el-row :gutter="10" class="opr-btn-group mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['customer:WoodCustomerCategory:add']"
                    >新增</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['customer:WoodCustomerCategory:edit']"
                    >修改</el-button
                >
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['customer:WoodCustomerCategory:remove']"
                    >删除</el-button
                >
            </el-col>
        </el-row>

        <Table
            :api="$Api.customer.category.list"
            :params="params"
            :selection="true"
            @select="handleSelectionChange"
            ref="Table"
        >
            <el-table-column label="客户类别" prop="basicsName" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click.native.stop="handleUpdate(scope.row)"
                        v-hasPermi="['customer:WoodCustomerCategory:edit']"
                        >修改</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click.native.stop="handleDelete(scope.row)"
                        v-hasPermi="['customer:WoodCustomerCategory:remove']"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </Table>

        <!-- 添加或修改客户类别对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="500px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="客户类别" prop="basicsName">
                    <el-input
                        v-model="form.basicsName"
                        placeholder="请输入客户类别"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "customerCategory",
    data() {
        return {
            filterData: [{ label: "客户类别", name: "basicsName" }],
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            params: {},
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                basicsName: [
                    {
                        required: true,
                        message: "客户类别不能为空",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {},
    methods: {
        /** 查询客户类别列表 */
        getList(params) {
            this.$refs.Table.getData(params);
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                basicsId: null,
                basicsName: null,
            };
            this.resetForm("form");
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.basicsId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加客户类别";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const basicsId = row.basicsId || this.ids;
            this.$Api.customer.category.detail(basicsId).then((res) => {
                this.form = res.data;
                this.open = true;
                this.title = "修改客户类别";
            });
        },
        /** 提交按钮 */
        submitForm() {
            let { basicsId } = this.form;
            let { form } = this;
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (basicsId != null) {
                        this.$Api.customer.category
                            .edit(form)
                            .then((res) => {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                    } else {
                        this.$Api.customer.category
                            .add(form)
                            .then((res) => {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const basicsIds = row.basicsId || this.ids;
            this.$confirm(
                '是否确认删除客户类别编号为"' + basicsIds + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).then(() => {
                return this.$Api.customer.category
                        .delete(basicsIds)
                        .then(() => {
                            this.getList();
                            this.msgSuccess("删除成功");
                        })
                        .catch(() => {});
            });
        },
    },
};
</script>
